<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片轮播</title>
    <style type="text/css">
        #owl-demo{position:relative;width:600px;height:365px;margin:20px auto 0 auto;}
        #owl-demo .item{ position:relative;display:block;}
        #owl-demo img{display:block;width:600px;height:365px;}
        #owl-demo b{position:absolute;left:0;bottom:0;width:100%;height:39px;background-color:#000;opacity:.5;filter:alpha(opacity=50);}
        #owl-demo span{position:absolute;left:10px;bottom:5px;width:350px;font:16px/32px "微软雅黑","黑体";color:#fff;text-align:left;}

        .owl-pagination{position:absolute;left:360px;bottom:3px;width:240px;height:32px;display: flex;align-items: center;justify-content: center;}
        .owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(image/bg15.png);*display:inline;*zoom:1;}
        .owl-pagination .active{width:25px;background-image:url(image/bg16.png);}
        .owl-buttons{display:none;}
        .owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
        .owl-prev{left:0;background-image:url(image/bg17.png);}
        .owl-next{right:0;background-image:url(image/bg18.png);}
        .owl-prev:hover{background-image:url(image/bg19.png);}
        .owl-next:hover{background-image:url(image/bg20.png);}
    </style>
    <link rel="stylesheet" href="css/owl.carousel.css" />
    <script type="text/javascript" src="js/jquery/jquery-1.8.3.js"></script>
    <script type="text/javascript" src="js/owl.carousel.js"></script>
</head>

<body>
<!-- Demo -->
<div id="owl-demo" class="owl-carousel">
    <a class="item" target="_blank" href=""><img src="" alt=""/><b></b><span></span></a>
    <a class="item" target="_blank" href=""><img src="" alt=""/><b></b><span></span></a>
    <a class="item" target="_blank" href=""><img src="" alt=""/><b></b><span></span></a>
    <a class="item" target="_blank" href=""><img src="" alt=""/><b></b><span></span></a>
    <a class="item" target="_blank" href=""><img src="" alt=""/><b></b><span></span></a>
</div>
<!-- Demo end -->

<script type="text/javascript">
    $.ajax({
        url:"getCarousel",
        type:"POST",
        dataType:"json",
        success:function (data) {
            $.each(data,function (i,n) {
               var a = $("a").eq(i);
               a.attr("href",n.url);
               a.children("img").attr("src",n.pic);
               a.children("span").html(n.title);
            })
        }
    });

    $(function(){
        $('#owl-demo').owlCarousel({
            items: 1,
            navigation: true,
            navigationText: ["上一个","下一个"],
            autoPlay: true,
            stopOnHover: true
        }).hover(function(){
            $('.owl-buttons').show();
        }, function(){
            $('.owl-buttons').hide();
        });
    });
</script>
</body>
</html>